<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    body{
      background-image: url("img/bj.png");
      background-size: cover;
      text-align: center;
    }
    #content{
      position: fixed;
      top: 80px;
      right:20px;
      bottom: 20px;
      left: 300px;
      background: rgba(255,255,255,.2);
      box-sizing: border-box;
      padding: 10px;
      overflow: hidden;
    }
    .legend{
      color: #fff;
      display: flex;
      justify-content: flex-end;
      padding-top: 30px;
    }
    .legend li{
      display: flex;
      margin-right: 30px;
      align-items: center;
    }
    .legend li div{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
      margin-right: 10px;
    }
    .legend li div span{
      font-size: 25px;
    }
    .legend li:nth-child(1) div,.table div{
      background-color: #66a8a6;
    }
    .legend li:nth-child(2) div,.table .ordering div{
      background-color: #f79700;
    }
    .legend li:nth-child(3) div,.table .eating div{
      background-color: #e5553f;
    }
    .table   {
      border-collapse: collapse ;
      width: 90%;
      margin:40px auto 0;
    }
    .table li{
      display: inline-block;
      text-align: center;
      margin: 0 37px 50px;
      cursor:pointer;
      color: #fff;
    }
    .table div{
      width: 120px;
      height: 120px;
      line-height: 120px;
      margin-bottom: 40px;
    }
    .table div span{
      font-size: 80px;
    }
    .logo{
      width:80%;
      display: block;
      margin: 50px auto;
    }
    .message{
      width: 200px;
      box-sizing: border-box;
      padding: 30px 0;
      margin: 0 auto 30px;
      border: 1px solid #fff;
      color: #fff;
      line-height: 40px;
      text-align: center;
      position: relative;
    }
    .message::before,.message::after,.action::before,.action::after{
      content: '';
      position:   absolute;
      width: 100%;
      height: 100%;
      left: 0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
    }
    .action{
      height: 300px;
      display: flex;
      flex-wrap: wrap;
      position: relative;
    }
    .action li{
      width: 50%;
      height: 50%;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      position: relative;
    }
    .action span{
      font-size: 40px;
      margin-bottom: 10px;
    }
    .action li.ac,.action li:hover{
      color: #f9d163;
    }
    .action i{
      width: 20px;
      height: 20px;
      background: #ff8400;
      border-radius: 50%;
      font-size: 14px;
      color: white;
      text-align: center;
      line-height: 20px;
      position: absolute;
      font-style: normal;
      left: 70px;
      top: 26px;
    }
    .action::before{
      top:50%;
    }
    .action::after{
      top: 50%;
      transform: rotate(90deg);
    }
    .message::before{
      top: 0;
    }
    .message::after{
      top: 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    a   {
      text-decoration: none;
    }
    table   {
      border-collapse: collapse ;
    }

  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-aside width="200px">
      <div style="width: 200px;height: 1000px;background-color: #545c64">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="black"
                active-text-color="#ffd04b">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-bell"></i>
            <span slot="title">点菜</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">菜品管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-price-tag"></i>
            <span slot="title">餐桌</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-user"></i>
            <span slot="title">会员中心</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-s-shop"></i>
            <span slot="title">门店管理</span>
          </el-menu-item>
        </el-menu>
      </div>
    </el-aside>
    <el-main>
      <div id="content">
        <ul class="legend">
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>空闲</span>
          </li>
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>点餐中</span>
          </li>
          <li >
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>用餐中</span>
          </li>
        </ul>
        <ul class="table">
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>1号桌</span>
          </li>
          <li>
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>2号桌</span>
          </li>
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>3号桌</span>
          </li>
          <li>
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>4号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>5号桌</span>
          </li>
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>6号桌</span>
          </li>
          <li>
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>7号桌</span>
          </li>
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>8号桌</span>
          </li>
          <li>
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>9号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>10号桌</span>
          </li>
          <li>
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>11号桌</span>
          </li>
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>12号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>13号桌</span>
          </li>
          <li class="ordering">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>14号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>15号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>16号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>17号桌</span>
          </li>
          <li class="eating">
            <div><span class="iconfont"><!--此处插入餐具图标--></span></div>
            <span>18号桌</span>
          </li>

        </ul>
      </div>
    </el-main>
  </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function() {
      return {
        info:"HelloEUI!"
      }
    },
    methods:{
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  })
</script>
</html>